<template>
  <div class="hot-article-list-warp">
    <div class="hot-article-item" v-for="(item,index) in listData" :key="index">
        <div class="hot-article-title">
            <h4><a class="title-text" href="javascript:;" @click="hotTitleClick(item.id,item.authorId)">{{item.title}}</a></h4>
        </div>
        <div class="hot-article-meta-warp">
            <div class="hot-article-user-info">
                <span>作者：{{item.userNickName}}</span>
            </div>
            <div class="hot-article-browse-count">
                <span>
                  <i class="el-icon-view"></i>
                  {{item.browseCount}}
                </span>
            </div>
        </div>
        <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
export default {
  name: "hotArticleList",
  props:{
      listData: Array
  },
  data(){
      return {

      }
  },
  methods:{
      hotTitleClick(myArticleId,authorId){
      // console.log('articleList组件:'+id);
      this.$router.push({
        name:"ArticleDetail",
        query:{
          articleId:myArticleId,
          authorId:authorId
        }
      });
    }
  }
};
</script>

<style>
.hot-article-list-warp {
    padding: 10px;
}
.hot-article-meta-warp {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hot-article-title {
    margin-bottom: 10px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.hot-article-user-info {
    padding-top: 10px;
}
.hot-article-browse-count {
    padding-top: 10px;
}
.title-text {
  text-decoration: none;
  color: black;
  transition: all 0.3s;
}
.title-text:hover {
  color: skyblue;
}
</style>